import { Navigator, View } from '@tarojs/components';
import { UsersQuery, useUsers } from 'src/hooks/useUsers';
import { AtList, AtListItem } from 'taro-ui';
import { StatusTextMap, UserStatus } from 'src/constant';
import { useProfile } from 'src/state/profile';
import Taro from '@tarojs/taro';

import './index.less'

const userTypes = {
  [UserStatus.PENDING]: '待审核',
  [UserStatus.PASS]: '已通过',
  [UserStatus.REJECT]: '已拒绝',
}

function UserAll() {
  const params = Taro.getCurrentInstance().router?.params as UsersQuery
  const status = params.status
  const [users] = useUsers(params)
  const { profile } = useProfile()

  const isCurrentUser = (user) => {
    return user.id === profile?.data?.id
  }

  return (
    <View>
      <View className='header'>
        <View className='header-name'>
          {status ? userTypes[status] : '所有'}用户
        </View>
      </View>
      <View className='body'>
        {
          users.length > 0 ?
          <AtList hasBorder={false}>
            {
              users.map(user => (
                <Navigator
                  url={isCurrentUser(user) ? undefined : `/pages/user-setting/index?id=${user.id}`}
                  key={user.id}
                >
                  <AtListItem
                    disabled={isCurrentUser(user)}
                    title={user.name}
                    extraText={StatusTextMap[user.status]}
                    arrow={isCurrentUser(user) ? undefined : 'right'}
                    note={isCurrentUser(user) ? '当前用户' : undefined}
                  />
                </Navigator>
              ))
            }
          </AtList> :
          <View className='user-list-empty'>暂无用户</View>
        }
      </View>
    </View>
  );
}

export default UserAll;
